<template>
  <div>
    <!--  饼状图 -->
    <el-dialog :visible.sync="fanModel" top="8%" width="803px" class="fan" :before-close="handleCloseFanModel">
      <template slot="title">
        <!--   <div class="addDataBtnBox" @click="handleAddDevice()"><i class="el-icon-check" /></div> -->
        <p class="dialog-title">{{ title }}</p>
      </template>
      <div class="dialog-content-fan">
        <div class="tabs">
          <template v-for="n in tabnum">
            <input :id="'tab' + n" type="radio" name="tab" :checked="n === 1">
            <label :for="'tab' + n" @click="handleFanClick('FAN' + (n - 1))">FAN{{ n - 1 }}</label>
          </template>
          <div class="content-container" ref="contentContainer">
            <div class="tab-content content" id="content">
              <div ref="threeContainer" class="three-container"></div>
            </div>
            <div class="data-box-left">
              <span v-show="environmentalShow">室内温度: {{ temp }}℃</span></br>
              <span v-show="environmentalShow">室内湿度: {{ humd }}%rh</span></br>
              <span v-show="environmentalShow">CO2: {{ coTwo }}ppm</span></br>
              <span v-show="environmentalShow">TVOC: {{ voc }}ppm</span></br>
              <div style="width: 100%;height: 15px;"></div>
              <span>累计运行时间:</span></br>
              <span>{{ runtime }}小时</span></br>
              <span>状态码：401</span></br>
              <span>制冷趋势数据:</span></br>
              <span>{{ cool }}</span></br>
              <span>制热趋势数据:</span></br>
              <span>{{ heat }}</span></br>
            </div>
            <div class="data-box-right" v-show="environmentalShow">
              <!--  <div class="data-box-right-item" style="margin: 0;">
              <span>温度设定值：</span>
              <span>26.5℃</span>
            </div>
            <div class="data-box-right-item">
              <span>空调控制：</span>
              <el-switch v-model="airbtn" active-color="#1890FF" inactive-color="#1890FF" size="mini"
                @change="airSingleControl()">
              </el-switch>
            </div> -->
              <!--  <div class="data-box-right-item">
              <span>室内温度：</span>
              <span>{{ temp }}℃</span>
            </div>
            <div class="data-box-right-item">
              <span>室内湿度：</span>
              <span>{{ humd }}%rh</span>
            </div>
            <div class="data-box-right-item">
              <span>CO2：</span>
              <span>{{ coTwo }}ppm</span>
            </div>
            <div class="data-box-right-item">
              <span>TVOC：</span>
              <span>{{ voc }}ppm</span>
            </div> -->
            </div>
            <!--  <div class="data-box-echarts" ref="myChart"></div> -->
          </div>
        </div>
        <div class="tabs-bottom">
          <div class="fan-params">
            <div class="fan-params-item">
              <div style="width: 100%;justify-content: center;display: flex;">
                <el-switch v-model="fanSwitchData.switch" active-color="#1890FF" inactive-color="#1890FF" size="mini"
                  @change="updateLigSingleControl(fanSwitchData)">
                </el-switch>
              </div>
              <span>空调群控</span>
            </div>
            <div class="fan-params-item">
              <div style="width: 50px;">
                <input v-model="fanUpdateSpt.value" class="inp-icon" @keydown="updateAirTemp(fanUpdateSpt)"></input>
              </div>
              <span>温度设置</span>
            </div>
            <div class="fan-params-item">
              <div
                style="width: 100%;justify-content: center;display: flex;height: 20px;align-items: center;cursor: pointer;"
                @click="openBookmarkDialog">
                <img src="../../assets/menu/beiwang.png" style="width: 15px;height: 15px;">
                <!--  <el-switch v-model="fanSwitchData.switch" active-color="#1890FF" inactive-color="#1890FF" size="mini"
                  @change="updateLigSingleControl(fanSwitchData)">
                </el-switch> -->
              </div>
              <span>备忘录</span>
            </div>
          </div>
          <div class="lig-params">
            <div class="lig-params-item" v-for="(item, index) in switchLig" :key="index">
              <div style="width: 100%;justify-content: center;display: flex;">
                <el-switch v-model="item.switch" active-color="#1890FF" inactive-color="#1890FF" :active-value="true"
                  :inactive-value="false" @change="updateLigSingleControl(item)" />
              </div>
              <span>照明 {{ index +1 }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 备忘录 自定义dialog -->
    <div style="position: absolute;z-index: 9999;">
      <FloatWindow v-model="addBookmarkDialog" title="备忘录" top="20%" width="50%" @confirm="handleBindMomeBtnClick"
        @close="handleBookmarkClose">
        <div class="mome" style="height:487px;padding: 0 20px;">
          <Tinymce v-model="memoText"></Tinymce>
        </div>
      </FloatWindow>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { getChildrenNode, getChildren, getPoints } from '../../api/threeModel'
import { updatePhysicalPointNew, getMemo, saveMemo } from '../../api/front'
const { ipcRenderer } = window.require('electron');
import { getRealDataPoint } from '../../api/cad.js';
import * as echarts from 'echarts';
import FloatWindow from '../../components/FloatWindow/FloatWindow.vue';
import Tinymce from "../../components/Tinymce/index.vue";
export default {
  name: '',
  props: [''],
  data() {
    return {
      addBookmarkDialog: false,
      memoText: '',
      icuID: '638d32652c6e5c1c5d192360',
      title: '风盘控制',
      fanModel: false,
      scene: null,
      camera: null,
      renderer: null,
      model: null,
      controls: null, // 控制器
      raycaster: new THREE.Raycaster(), // 射线检测器
      mouse: new THREE.Vector2(), // 鼠标位置
      dialogVisible: false, // 控制 dialog 是否显示
      selectedObjectName: '', // 被点击物体的名称
      clock: null,
      flowMaterial: null,
      targetMesh: null, // 记录特定模块
      targetModule: null, // 需要旋转的模块
      targetModule2: null, // 需要旋转的模块
      fanbtn: true,
      tempvalue: 25,
      ligbtns: [
        { label: '走廊灯', value: true },
        { label: '会议室灯', value: true },
        { label: '办公室灯', value: true },
        { label: '大厅灯', value: true }
      ],
      airbtn: false, // 空调开关
      originalMaterialColor: null, // 用于保存原始颜色
      originalMaterialColor1: null, // 用于保存原始材料贴图
      tabnum: 3,
      fanData: {

      },
      fanValue: {

      },
      deviceData: {
        cadTreeId: 37,
        deviceId: "638d32652c6e5c1c5d192360",
        iconIndex: 1,
        id: 5,
        modelName: "75",
        subDeviceMap: [{
          keyPrefix: "point_default_prefix:ICU13-F1J:FANCMD:*",
          subDeviceId: "638d32652c6e5c1c5d19",
          subDeviceName: "FANCMD",
        }, {
          keyPrefix: "point_default_prefix:ICU13-F1J:FANCMD:*",
          subDeviceId: "638d32652c6e5c1c361",
          subDeviceName: "FAN0",
        }, {
          keyPrefix: "point_default_prefix:ICU13-F1J:FANCMD:*",
          subDeviceId: "638d32652c6e5c15d192361",
          subDeviceName: "FAN1",
        }],
        templateType: "1"
      },
      fanNames: ["FAN0", "FAN1", "FAN2", "FAN3", "FAN4", "FAN5", "FAN6", "FAN7", "FAN8", "FAN9", "FAN10", "FAN11", "FAN12", "FAN13", "FAN14", "FAN15"],
      fanArray: [],
      numberLabels: [], // 标签缓存
      timer: null, // 定时器
      runtime: 0, // 运行时间
      cool: 0,
      heat: 0,
      humd: "0",
      coTwo: '0',
      voc: '0',
      temp: '0',
      environmentalShow: false,
      fanSwitchData: {
        switch: false,
        id: "",
        keyPrefix: "",
        value: 0
      },
      fanUpdateSpt: {
        id: "",
        keyPrefix: "",
        value: 0
      },
      switchLig: [],
      md5: ''
    };
  },

  components: {
    FloatWindow, Tinymce
  },

  computed: {},

  beforeMount() { },

  mounted() {

  },
  beforeDestroy() {
    this.$refs.threeContainer.removeEventListener('click', this.onClick);
    window.removeEventListener('resize', this.onWindowResize);
  },
  methods: {
    handleBookmarkClose() {
      this.addBookmarkDialog = false
    },
    confirmFanModel() {
      this.fanModel = false
    },
    handleCloseFanModel() {
      this.fanModel = false
      clearInterval(this.timer)
    },
    openDialog(deviceObj) {
      this.deviceData = deviceObj;
      this.title = '风盘控制';
      this.title = deviceObj.modelName + this.title;
      // 处理数据
      this.updateFanArray()
      this.fanModel = true
      this.getTreeData()
      this.$nextTick(() => {
        this.initThree();
        /* this.initEcharts(); */
        if (deviceObj) {
          this.handleFanClick('FAN0')
        }
      })
    },
    initThree() {
      if (!this.renderer) {
        // 创建场景
        this.scene = new THREE.Scene();
        // 创建相机
        this.camera = new THREE.PerspectiveCamera(
          750,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );

        // 创建渲染器
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(780, 368);
        this.renderer.setClearColor(0x000C29);
        this.$refs.threeContainer.appendChild(this.renderer.domElement);
        // 设置相机位置
        this.camera.position.set(177.12705221934468, 65.35270617514773, -323.8708805636655);
        // 添加光源0073ff
        const light = new THREE.AmbientLight(0xffffff, 2.6); // Ambient light
        this.scene.add(light);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 2.8);
        // Directional light
        directionalLight.position.set(10, 20, 10);
        this.scene.add(directionalLight);
        // 初始化OrbitControls控制器
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        // 缩放限制
        this.controls.enableZoom = false;
        // this.controls.minDistance = 300;   // 相机最近到5单位
        // this.controls.maxDistance = 400;  // 相机最远到20单位
        this.controls.enableDamping = true; // 开启阻尼效果
        this.controls.dampingFactor = 0.25; // 阻尼系数
        this.controls.enableDamping = true;   // 开启惯性
        this.controls.screenSpacePanning = false; // 禁止屏幕空间平移
        this.controls.enableZoom = false;
        this.controls.minPolarAngle = Math.PI / 2.5;  // 最小仰角60°
        this.controls.maxPolarAngle = Math.PI / 2.5;  // 最大仰角90°
        this.controls.minAzimuthAngle = -Infinity;
        this.controls.maxAzimuthAngle = Infinity;
        this.controls.enablePan = false;
        /*   this.controls.update(); */
        this.controls.target.set(7.542631373686641, -19.705037666893844, 1.7662049884269178); // 让相机朝向 (1,1,0) UI定义视图坐标轴的中心
        this.controls.update();

        // 加载流动能量贴图
        const flowTexture = new THREE.TextureLoader().load('001.jpg');
        flowTexture.wrapS = flowTexture.wrapT = THREE.RepeatWrapping;

        // 创建流动材质
        this.flowMaterial = new THREE.MeshBasicMaterial({
          map: flowTexture,
          color: new THREE.Color(0x00aaff),
          transparent: true,
          opacity: 0.2,
          side: THREE.DoubleSide,
          depthWrite: false,
        });
        // 加载模型
        this.loadModel();
        // 渲染循环
        this.animate();
      }
    },
    async loadModel() {
      const staticPath = await ipcRenderer.invoke("get-static-path");
      const loader = new GLTFLoader();
      loader.load(`${staticPath}fj2.glb`, // 替换为你的模型路径
      //  loader.load(`fj2.glb`, // 替换为你的模型路径
        (gltf) => {
          this.model = gltf.scene;
          this.scene.add(this.model);
          // 添加标签
          this.updateNumberLabels([
            { text: '送风温度：26.5℃', position: new THREE.Vector3(95, 37, 21) },
            /*  { text: '电流：0.45A', position: new THREE.Vector3(82, -21, -40) }, */
            { text: '电流：0.45A', position: new THREE.Vector3(-10, -25, -45) },
            { text: '回风温度：26.5℃', position: new THREE.Vector3(-80, -30, -45) },
          ]);
          // 遍历模型中的所有物体，给每个物体设置名称
          this.model.traverse((child) => {
            if (child.isMesh) {
              child.name = child.name || `Object_${child.uuid}`; // 设置名称，如果没有名称则使用 UUID
              // 对指定的模型添加流动效果
              if (child.name == 'HRQ') {
                this.targetMesh = child;
                // clone原材质（不会影响其他模块）
                this.originalMaterialColor1 = child.material;
                // 把流动材质包裹在原材质上，后面可以更灵活地切换
                /*  child.material = this.flowMaterial;
                 child.userData.originalMaterial = originalMaterial; */
              }
              // 模型旋转效果
              if (child.isMesh && child.name === 'fengshan') {
                // 中心对齐处理
                const box = new THREE.Box3().setFromObject(child);
                const center = new THREE.Vector3();
                box.getCenter(center);
                child.geometry.center(); // 将几何体中心化
                child.position.copy(center); // 再将它移回原位
                this.targetModule = child;
              }
              // 阀门模型的选择
              if (child.isMesh && child.name === 'famen') {
                this.targetModule2 = child;
                const originalMaterial = child.material.clone();
                child.userData.originalMaterial = originalMaterial;
              }
            }
          });

        },
        undefined,
        (error) => {
          console.error('加载模型失败:', error);
        }
      );
    },
    // 添加数字标签
    addNumberLabel(text, position) {
      const canvas = document.createElement('canvas');
      canvas.width = 600;
      canvas.height = 266;
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = '#0026e3';
      ctx.font = 'bold 70px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      const texture = new THREE.CanvasTexture(canvas);
      const material = new THREE.SpriteMaterial({ map: texture, transparent: true });
      const sprite = new THREE.Sprite(material);

      const aspect = canvas.width / canvas.height;
      sprite.scale.set(45, 45 / aspect, 1); // 等比缩放，保持不扁
      sprite.position.copy(position);

      this.scene.add(sprite);
      this.numberLabels.push(sprite);
    },
    updateNumberLabels(labelList) {
      // 清除旧标签
      this.numberLabels.forEach(label => {
        this.scene.remove(label);
        if (label.material.map) label.material.map.dispose();
        if (label.material) label.material.dispose();
      });
      this.numberLabels = [];
      // 添加新标签
      labelList.forEach(item => {
        this.addNumberLabel(item.text, item.position);
      });
    },
    animate() {
      // 自动旋转逻辑
      /*  if (this.model) {
         this.model.rotation.y += 0.001;
       } */
      // 请求下一帧
      requestAnimationFrame(this.animate);
      if (this.targetMesh && this.airbtn) {
        this.flowMaterial.map.offset.x += 0.01; // 控制流动速度
      }
      // 让目标模块持续旋转
      if (this.targetModule && this.airbtn) {
        this.targetModule.rotation.x += 0.08;
      }
      // 更新控制器留档
      this.controls.update();
      // 只渲染，不做动画
      this.renderer.render(this.scene, this.camera);
    },
    // 单控开关
    airSingleControl() {
      this.change3DColor()
      //this.change3DMaps()
      this.getTreeData()
    },
    // 改变阀门的颜色
    change3DColor() {
      if (this.targetModule2) {
        const material = this.targetModule2.material;
        if (!this.originalMaterialColor) {
          // 首次保存原始颜色（只保存一次）
          this.originalMaterialColor = material.color.clone();
        }
        if (this.airbtn) {
          // 设置为绿色
          material.color.set('#00ff00'); // 绿色
        } else {
          // 恢复原始颜色
          material.color.copy(this.originalMaterialColor);
        }
      }
    },
    change3DMaps() {
      if (this.targetMesh) {
        if (this.airbtn) {
          this.targetMesh.material = this.flowMaterial
        } else {
          this.targetMesh.material = this.originalMaterial1
        }
      }
    },
    getTreeData() {
      /* this.tabnum = 0
      getChildrenNode(this.icuID).then(res => {
        res.data[0].children.forEach(item => {
          if (item.secondName == "风盘") {
            console.log(item, "风盘")
            this.tabnum = this.tabnum + 1
            this.fanData[item.name] = item
          }
        })
      }) */
    },
    intervalGetData() {
      // getPoints().then(res)
    },
    /* initEcharts() {
      this.chart = echarts.init(this.$refs.myChart)
      const option = {
        title: {
          text: '温湿度趋势曲线',
          textStyle: {
            color: '#D1D1D1',
            fontSize: 10,
            fontWeight: 'bold'
          },
          left: 'left'
        },
        grid: {
          left: '2%',        // 👈 左边距为0
          right: '3%',       // 👈 右边距为0
          top: '20px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '销量',
            symbol: 'none',
            type: 'line',            // 这里改为 'line' 即变为折线图
            data: [5, 20, 36, 10, 10, 20],
            smooth: true,            // 开启平滑曲线
            lineStyle: {
              color: '#3398DB',
              width: 1
            },
            itemStyle: {
              color: '#3398DB'
            }
          }
        ]
      }
      this.chart.setOption(option)
    }, */
    // 处理数据
    updateFanArray() {
      if (!this.deviceData || !Array.isArray(this.deviceData.subDeviceMap)) {
        this.fanArray = [];
        return;
      }
      this.fanArray = this.deviceData.subDeviceMap.filter(sub =>
        this.fanNames.includes(sub.subDeviceName)
      );
      this.tabnum = this.fanArray.length
    },
    // 点击tab查询数据
    handleFanClick(fanName) {
      clearInterval(this.timer)
      console.log("当前点击的风机是：", fanName);
      if (!this.deviceData || !Array.isArray(this.deviceData.subDeviceMap)) return null;
      const found = this.deviceData.subDeviceMap.find(item => item.subDeviceName === fanName);
      let obj = {
        "keyPrefix": found.keyPrefix,
        "id": found.subDeviceId,
        "type": 'subDevice'
      }
      this.timer = setInterval(() => {
        getPoints(obj).then(res => {
          const dataArray = res.data;
          let airsa = '';
          let airba = '';
          let aircur = '';
          let speed = '';
          dataArray.forEach(item => {
            switch (item.name) {
              case "AIR_SA":
                airsa = item.value;
                break;
              case "AIR_BA":
                airba = item.value;
                break;
              case "AIR_CUR":
                aircur = item.value;
                break;
              case "IR_STATE":
                speed = item.value;
                break;
              case "IR_HR":
                this.runtime = item.value;
                break;
              case "AR_CP":
                this.cool = item.value;
                break;
              case "AR_HP":
                this.heat = item.value;
                break;
              case "BW_FAN_ON":
                if (item.value == "1") {
                  this.airbtn = true
                  this.airSingleControl()
                } else {
                  this.airbtn = false
                  this.airSingleControl()
                }
            }
          });
          console.log(airsa, airba, aircur, '整理好的数据');
          this.updateNumberLabels([
            { text: `送风温度：${airsa}℃`, position: new THREE.Vector3(95, 37, 21) },
            { text: `电流：${aircur}A`, position: new THREE.Vector3(-10, -25, -45) },
            /*  { text: `${speed === '1' ? '高速' : '低速'}`, position: new THREE.Vector3(-10, -25, -45) }, */
            { text: `回风温度：${airba}℃`, position: new THREE.Vector3(-80, -30, -45) }
          ]);

        });
        this.environmentalData()
      }, 1000);
      // 获取群控数据
      this.getGroupControlPoints()
    },
    // 判断是否有环境传感器有的话获取没有的话就显示空
    environmentalData() {
      const targetSubDevice = this.deviceData.subDeviceMap.find(
        item => item.subDeviceName === "HTSGP01"
      );
      if (targetSubDevice) {
        this.environmentalShow = true;
        let obj = {
          "keyPrefix": targetSubDevice.keyPrefix,
          "id": targetSubDevice.subDeviceId,
          "type": 'subDevice'
        }
        getPoints(obj).then(res => {
          res.data.forEach(item => {
            switch (item.name) {
              case "AIR_Humd":
                this.humd = item.value;
                break;
              case "AIR_CO2":
                this.coTwo = item.value;
                break;
              case "AIR_Temp":
                this.temp = item.value;
                break;
              case "AIR_VOC":
                this.voc = item.value;
                break;
            }
          });
        })
      } else {
        this.environmentalShow = false;
        console.log("不存在 HTSGP01");
      }
    },
    // 获取群控点位的信息
    getGroupControlPoints() {
      const device = this.deviceData.subDeviceMap.find(
        item => item.subDeviceName === "FANCMD"
      );
      if (device) {
        let obj = {
          "keyPrefix": device.keyPrefix,
          "id": device.subDeviceId,
          "type": 'subDevice'
        }
        getPoints(obj).then(res => {
          res.data.forEach(item => {
            switch (item.name) {
              case "BW_FANS_ON":
                this.fanSwitchData.id = item.objectId
                this.fanSwitchData.keyPrefix = item.redisKey
                this.fanSwitchData.value = item.value
                if (item.value == "1") {
                  this.fanSwitchData.switch = true;
                } else {
                  this.fanSwitchData.switch = false;
                }
                break;
              case "AW_FANS_SPT":
                this.fanUpdateSpt.id = item.objectId
                this.fanUpdateSpt.keyPrefix = item.redisKey
                this.fanUpdateSpt.value = item.value
                break;

            }
          });
        })
      }
      const ligDevice = this.deviceData.subDeviceMap.find(
        item => item.subDeviceName === "ICUCMD"
      );
      if (ligDevice) {
        this.switchLig = []
        let obj = {
          "keyPrefix": ligDevice.keyPrefix,
          "id": ligDevice.subDeviceId,
          "type": 'subDevice'
        }
        getPoints(obj).then(res => {
          res.data.forEach(item => {
            console.log(item);
            let modelObj = {
              switch: false,
              id: '',
              keyPrefix: '',
              value: '0',
              name: '',
            }
            if (item.value == "1") {
              modelObj.switch = true;
            } else {
              modelObj.switch = false;
            }
            modelObj.id = item.objectId
            modelObj.keyPrefix = item.redisKey
            modelObj.value = item.value
            modelObj.name = item.name;
            this.switchLig.push(modelObj)
          });
        })
      }
    },
    // 单控 控制开完
    updateLigSingleControl(item) {
      let val = item.switch ? '1' : '0'
      let obj = {
        id: item.id,
        value: val,
      }
      updatePhysicalPointNew(obj).then(res => {
        this.$message.success('操作成功')
      })
    },
    // 修改空调的温度
    updateAirTemp(item) {
      let obj = {
        id: item.id,
        value: item.value,
      }
      updatePhysicalPointNew(obj).then(res => {
        this.$message.success('操作成功')
      })
    },
    // 打开备忘录
    openBookmarkDialog() {
      this.addBookmarkDialog = true
      getMemo(this.deviceData.deviceId).then(res => {
        this.memoText = res.data.memo
        this.md5 = res.data.md5
      })
    },
    handleBindMomeBtnClick() {
      let obj = {
        id: this.deviceData.deviceId,
        md5: this.md5,
        memo: this.memoText
      }
      saveMemo(obj).then(res => {
        this.$message.success('操作成功')
      })
    },
  },

  watch: {}

}

</script>
<style scoped>
.fan /deep/ .el-dialog__body {
  padding: 0px 0px 0px 0px;
}

.fan /deep/ .el-dialog {
  border: 1px solid #3D3D3D;
  background: #535353;
}

.fan /deep/ .el-dialog__header {
  padding: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #363636;
}

.fan /deep/ .el-switch {
  width: 30px;
  height: 15.5px;
}

.fan /deep/ .el-switch__core {
  height: 15.5px;
}

.fan /deep/ .el-switch__core:after {
  top: 0;
  width: 14px;
  height: 14px;
  background-color: #000C29;
}

.fan /deep/.el-switch.is-checked .el-switch__core::after {
  left: 108%;
  margin-left: -17px;
}


.addDataBtnBox {
  position: absolute;
  top: 11px;
  right: 47px;
  cursor: pointer;
}

.dialog-content-fan {
  width: 100%;
  height: 477px;
  overflow: hidden;
}

input[type="radio"] {
  display: none;
}

.tabs label {
  padding: 5px 20px;
  background: #535353;
  margin-right: 1px;
  cursor: pointer;
  border-radius: 0px 0px 0 0;
  display: inline-block;
  font-size: 10px;
  color: #A6A6A6;
  border-right: 1px solid #272727;
}

input[type="radio"]:checked+label {
  background: #000C29;
  border-bottom: 1px solid #000C29;
  border-right: 1px solid #272727;
}

.tab-content {
  border: 1px solid #000C29;
  background: #000C29;
  padding: 20px;
  margin-top: -1px;
}

.tabs-bottom {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.content {
  display: none;
  width: 100%;
  height: 400px;
  padding: 0;
  margin: 0;
}

#tab1:checked~.content-container #content,
#tab2:checked~.content-container #content,
#tab3:checked~.content-container #content,
#tab4:checked~.content-container #content,
#tab5:checked~.content-container #content,
#tab6:checked~.content-container #content,
#tab7:checked~.content-container #content,
#tab8:checked~.content-container #content {
  display: block;
}

.content-container {
  width: 100%;
  height: 400px;
  background-color: #000C29;
}

.three-container {
  width: 100%;
  height: 381px;
  top: 17px;
  left: 76px;
}

.fan-params {
  width: 210px;
  height: 100%;
  display: flex;
  padding-top: 5px;
}

.lig-params {
  width: calc(100% - 150px);
  height: 100%;
  display: flex;
  justify-content: end;
  padding-top: 5px;
}

.fan-params-item {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #d5d5d5;
  border-right: 1px solid #272727;
}

.lig-params-item {
  width: 70px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #d5d5d5;
  border-left: 1px solid #272727;
}

.data-box-left {
  width: 150px;
  height: 200px;
  position: absolute;
  z-index: 111;
  top: 60px;
  left: 20px;
  font-size: 11px;
  color: #d1d1d1;
}

.data-box-left span {
  display: inline-block;
  margin: 3px 0;
}

.data-box-right {
  width: 120px;
  height: 200px;
  position: absolute;
  z-index: 111;
  top: 80px;
  right: 10px;
}

.data-box-right-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d1d1d1;
  font-size: 11px;
  margin: 11px 0;
}

.dialog-title {
  font-size: 11px;
  color: #ffffff;
}

.data-box-echarts {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 111;
  bottom: 5px;
}

.inp-icon {
  width: 53px;
  height: 20px;
  background-color: #000C29;
  font-size: 11px;
  color: #fff;
}
</style>